<script setup>
defineProps({
  title: {
    type: String,
    default: ''
  },
  count: {
    type: Number,
    default: 0
  },
  icon: {
    type: String,
    default: ''
  }
})
</script>

<template>
  <div class="home-card">
    <view class="left">
      <h2>{{ title }}</h2>
      <div class="count">{{ count }}</div>
    </view>
    <view class="right">
      <el-icon>
        <component :is="icon"></component>
      </el-icon>
    </view>
  </div>
</template>

<style lang="scss" scoped>
.home-card {
  @include flex-box;
  align-items: center;
  justify-content: space-between;
  background: $white;
  padding: $spacing-1;
  height: 200px;
  border-radius: $border-radius-2;

  .left, .right {
    height: 100%;
  }

  .left {
    @include flex-box(false, true);
    justify-content: space-between;

    .count {
      font-size: 40px;
    }
  }

  .right {
    @include flex-box(true);
    justify-content: center;
    width: 100px;
    height: 100px;
    background: $light-bg;
    border-radius: $border-radius-2;
    font-size: 30px;
  }
}
</style>
